<template>
  <el-card>
    <!-- 头部区域 start -->
    <template #header>
      <div class="card-header">
        <h3>
          <el-icon style="margin-right: 10px;"><Watch/></el-icon>日志管理
        </h3>

        <!-- 搜索区域 start  -->
        <div class="card-search">
          <el-row :gutter="10">
            <el-col :span="14">
              <el-input prefix-icon="Search" v-model="searchValue" @keyup.enter.native="search" placeholder="关键字搜索(回车)"/>
            </el-col>
            <el-col :span="7">
              <el-button plain style="width: 100%" color="#2fa7b9" @click="exportExcelAction">
                <el-icon><Download/></el-icon>
                导出Excel
              </el-button>
            </el-col>
            <el-col :span="3" style="display: inline-flex;justify-content: center;align-items: center;cursor: pointer">
              <el-icon style="font-size: 20px" color="#b3b6bc" @click="refresh"><Refresh/></el-icon>
            </el-col>

          </el-row>
        </div>
        <!-- 搜索区域 end  -->

      </div>
    </template>
    <!-- 头部区域 end -->

    <!-- 表格区域 start -->
    <div class="table-box">
      <el-table element-loading-text="加载中..." v-loading="loading" :data="tableData"
                style="width: 100%;text-align: center;" :cell-style="{ textAlign: 'center' }"
                :header-cell-style="{ fontSize: '15px',background: '#e99d53',color: 'white',textAlign: 'center' }">
        <el-table-column label="序号" width="100" type="index" :index="Nindex"></el-table-column>
        <el-table-column label="来源IP">
          <template #default="scope">
            <span v-if="scope.row.remoteAddr == '::1'">内网地址</span>
            <span v-else>{{ scope.row.province}}-{{ scope.row.city }}</span>
          </template>
        </el-table-column>

        <el-table-column label="请求状态">
          <template #default="scope">
            <span>{{ scope.row.statusCode }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作方式">
          <template #default="scope">
            <span>{{ scope.row.httpMethod }}</span>
          </template>
        </el-table-column>

        <el-table-column label="请求方法">
          <template #default="scope">
            <span>{{ scope.row.classMethod }}</span>
          </template>
        </el-table-column>


        <el-table-column label="执行时间(ms)">
          <template #default="scope">
            <span>{{ scope.row.useTime }}</span>
          </template>
        </el-table-column>


        <el-table-column label="浏览器">
          <template #default="scope">
            <span>{{ scope.row.browser }}</span>
          </template>
        </el-table-column>

        <el-table-column label="访问时间" >
          <template #default="scope">
            <span>{{ formatTime(scope.row.createdAt,'yyyy-MM-dd HH:mm:ss') }}</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页插件 start -->
      <el-pagination background layout="total,sizes,prev,pager,next,jumper"
                     :total="total" v-model:page-size="pageSize" :page-sizes="[10,20,30,40]"
                     @current-change="changePage">
      </el-pagination>
      <!-- 分页插件 end -->
    </div>
    <!-- 表格区域 end -->

  </el-card>
</template>

<script setup lang="ts">
import {ref, reactive, toRefs, onMounted} from "vue";
import {formatTime} from "@/utils/date.ts";
import { ElMessage } from "element-plus";
import {exportExcel} from "../../../utils/exportExcel.ts";
import {getLogListApi} from "../../../api/system/log/log.ts";

const state = reactive({
  // 搜索关键词
  searchValue: '',
  // 表格数据
  tableData: [],
  // 总条数
  total: 0,
  // 每页显示行数
  pageSize: 10,
  // 当前页码
  pageIndex: 1,
  // 数据加载
  loading: false
})



// 获取数据列表
const loadData = async (state: any) => {
  state.loading = true;
  // 先清空表格数据
  state.tableData = [];
  const params = {
    'pageIndex': state.pageIndex,
    'pageSize': state.pageSize,
    'keyword': state.searchValue
  }
  console.log('params:',params);
  const { data } = await getLogListApi(params);
  state.tableData = data.result.list;
  state.total = data.result.count;
  state.loading = false;
};

// 刷新
const refresh = () => {
  // 搜索关键字
  state.searchValue = '';
  // 加载数据
  loadData(state);
};

// 搜索
const search = () => {
  if (state.searchValue !== null && state.searchValue !== '') {
    loadData(state);
    ElMessage({
      type: 'success',
      message: `关键字${state.searchValue}搜索的内容如下`
    })
  }
}

// 切换页码函数
const changePage = (val: number) => {
  state.pageIndex = val;
  loadData(state)
}

// 定义序号函数
const Nindex = (index: number) => {
  // 当前页码
  const pageIndex = state.pageIndex;
  // 每页行数
  const pageSize = state.pageSize;
  return index + 1 + (pageIndex - 1) * pageSize;
}

// 定义需要导出的列名对象
const column = [
  { name: 'remoteAddr',label: '来源IP'  },
  { name: 'statusCode',label: '请求状态'  },
  { name: 'httpMethod',label: '操作方式'  },
  { name: 'useTime',label: '执行时间(ms)'  },
  { name: 'browser',label: '浏览器'  },
  { name: 'createdAt',label: '访问时间'  },
];

// 导出Excel函数
const exportExcelAction = () => {
  exportExcel({
    column,
    data: state.tableData,
    filename:  "日志信息数据",
    autoWidth: true,
    format: 'xlsx',
  })
}


// 挂载之后加载数据列表
onMounted(() => {
  loadData(state);
})
const { tableData,total,pageSize,pageIndex,loading,searchValue } = toRefs(state);

</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #e99d53;
}


/* 自定义分页样式 */
.el-pagination {
  margin-top: 20px;
  justify-content: center;
}

:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background-color: #e99d53;
}

</style>